<template>
  <el-dialog :close-on-click-modal="false" title="流程进度查看" :visible.sync="open" width="80vw" append-to-body>
    <div class="containers" ref="content">
      <div id="canvas" class="canvas" ref="canvas"></div>
    </div>
  </el-dialog>

</template>

<script>
  import BpmnModeler from 'bpmn-js/lib/Modeler'
  import { getDefinitionsByInstanceId, getBpmnXml, getHighLine } from '@/api/activiti/definition'

  export default {
    name: "BpmnViewer",
    props: {
    },
    data() {
      return {
        open: false,
        height: '',
        container: null,
        canvas: null,
        bpmnDefine: {
          deploymentId: null,
          deploymentName: null,
          xml: '',
          nodes: null
        },
      }
    },
    methods: {
      // 初始化方法
      async init(instanceId) {
        // 查询高亮节点
        await getHighLine(instanceId).then(res => {
          if (res && res.code === 200) {
            this.bpmnDefine.nodes = res.data;
          }
        })
        // 设置颜色
        let colorJson = this.getByColor(this.bpmnDefine.nodes);
        // 加载流程图
        await getBpmnXml(instanceId).then(res => {
          const that = this;
          if (res && res.code === 200) {
            this.container = this.$refs.content
            let canvas = document.getElementById('canvas')
            // 先移除之前的图
            canvas.innerHTML = ''
            this.bpmnModeler = new BpmnModeler({
              container: canvas
            })
            const bpmnXmlStr = res.data
            this.bpmnModeler.importXML(bpmnXmlStr).then(() => {
              const canvas = that.bpmnModeler.get('canvas')
              canvas.zoom('fit-viewport')
            })
            setTimeout(function () {
              for (let i in colorJson) {
                that.setColor(colorJson[i], that.bpmnModeler);
              }
            }, 200);
          }
        })
      },
      /**
       * 根据数据设置颜色
       * @param data
       * @returns {Array}
       */
      getByColor(data){
        let ColorJson=[]
        for(let k in data['highLine']){
          let par={
            "name": data['highLine'][k],
            "stroke":"green",
            "fill":"green"
          }
          ColorJson.push(par)
        }
        for(let k in data['highPoint']){
          let par={
            "name": data['highPoint'][k],
            "stroke":"gray",
            "fill":"#eae9e9"

          }
          ColorJson.push(par)
        }
        for(let k in data['iDo']){
          let par={
            "name": data['iDo'][k],
            "stroke":"green",
            "fill":"#a3d68e"
          }
          ColorJson.push(par)
        }
        for(let k in data['waitingToDo']){
          let par={
            "name": data['waitingToDo'][k],
            "stroke":"green",
            "fill":"yellow"
          }
          ColorJson.push(par)
        }
        return ColorJson
      },

      /**
       * 通过Json设置颜色
       * @param {object} json json 字符串
       */
      setColor(json, bpmnModeler) {
        let modeling = bpmnModeler.get('modeling');
        let elementRegistry = bpmnModeler.get('elementRegistry');
        let elementToColor = elementRegistry.get(json.name);

        if (elementToColor) {
          modeling.setColor([elementToColor], {
            stroke: json.stroke,
            fill: json.fill
          });
        }
      },
      // 表单重置
      reset() {
        this.bpmnDefine = {
          deploymentId: null,
          deploymentName: null,
          xml: ''
        }
      },
    }
  }
</script>

<style scoped>
  .containers {
    position: absolute;
    display: inline-block;
    background-color: #ffffff;
    width: 78vw;
    height: 66vh;
  }

  .canvas {
    width: 100%;
    height: 100%;
    pointer-events: none;
    cursor: default;
  }

  .canvas img {
    display: none;
  }
</style>
